import React from 'react'
import { Flex } from 'antd-mobile'
import dongtaiStyle from './css/dongtai.module.css'
import getDongtai from './api/index'
import Support from './api/support'
import { withRouter, HashRouter as Router, Route, Switch } from "react-router-dom"

class Content extends React.Component {
    constructor() {
        super()
        this.state = {
            dongtai: []
        }
    }

    componentDidMount() {
        // this.listfn()
        // this.setState({
        //     dongtai:res.event
        // })
        getDongtai()
            .then(body => body.json())
            .then(res => {
                this.setState({
                    dongtai: res.event
                })
            })
    }
    // listfn = async () => {
    //     await getDongtai().then(body => body.json()).then(res => this.setState({ dongtai: res.event }))
    // }

    // 跳转发布路由
    release_video() {
        this.props.history.push('/dongtai2/release')
    }

    userInfo(id) {
        this.props.history.push(`/person?id=${id}`)
    }

    //点击添加关注  问题：更新不同步
    concern(userId, index) {

        fetch(`http://106.12.79.128:666/follow?id=${userId}&t=1`, { credentials: 'include' })
            .then(body => body.json())
            .then(res => {
                if (res.code == 200) {
                    alert('关注成功！');
                    // console.log(res,"9999444444499999999")
                } else { alert("关注失败-----" + res.msg); console.log(res) }
            })
        getDongtai()
            .then(body => body.json())
            .then(res => {
                console.log("8888888888888")
                // console.log(this)
                this.setState({
                    dongtai: res.event
                })
                console.log("9999999999999999")
            })
    }

    //给动态点赞  问题：postman请求成功 fetch请求参数出错 点赞后liked属性不同步更新，需重新请求
    like(threadId) {
        fetch(`http://106.12.79.128:666/resource/like?t=1&type=6&threadId=${threadId}`, { credentials: 'include' })
            .then(body => body.json())
            .then((res) => {
                console.log(res)
                if (res.code == 200) {
                    alert('点赞成功')
                } else {
                    alert('点赞失败----' + res.msg)
                }
            })
        this.setState({})
    }
    //进入动态详情路由
    get_detail(id, threadId) {
        // console.log(id)
        this.props.history.push(`/dongtai2/dt_details?actId=${id}&threadId=${threadId}`)
    }
    //进入分享页面 接口返回值有问题
    share() {
        console.log("分享")
        this.props.history.push('/dongtai2/share')
    }


    render() {
        // console.log(this.state.dongtai)
        let { dongtai } = this.state
        console.log(dongtai)
        // dongtai.map(item => console.log(item.rcmdInfo))

        // if (dongtai) {
        return (
            <div>
                {/* <div>
                    {dongtai?'':<div><p>loading<span></span></p></div>}
                </div> */}
                <div>
                    <ul className={dongtaiStyle.top}>
                        <li onClick={this.release_video.bind(this)}>
                            <span className={dongtaiStyle.release}><img style={{ marginTop: '10px', marginRight: '5px' }} src={require("./img/发布 (1).png")} />发动态</span>
                        </li>
                        <li onClick={this.release_video.bind(this)}>
                            <span className={dongtaiStyle.release}><img style={{ marginTop: '10px', marginRight: '5px' }} src={require("./img/发布视频.png")} />发布视频</span>
                        </li>
                    </ul>
                    <hr />
                    <div className={dongtaiStyle.dongtai}>
                        <ul className={dongtaiStyle.dongtai_list} style={{ display: Flex }}>
                            {dongtai.map((item) => {
                                return (
                                    <li className={dongtaiStyle.dongtai} key={item.id}>
                                        <div className={dongtaiStyle.skip}>
                                            <div className={dongtaiStyle.head}>
                                                {/* 跳转用户详情 */}
                                                <img className={dongtaiStyle.touxiang} src={item.user.avatarUrl} onClick={this.userInfo.bind(this, item.user.userId)} />
                                                <div className={dongtaiStyle.nickfans}>
                                                    <span className={dongtaiStyle.nickname} onClick={this.userInfo.bind(this, item.user.userId)}>{item.user.nickname}</span>
                                                    <span className={dongtaiStyle.fans}>{item.rcmdInfo ? `${item.rcmdInfo.userReason}` : ``}</span>
                                                </div>
                                                {/* 判断是否关注过 */}
                                                {item.user.followed ? <span className={dongtaiStyle.guanzhu} onClick={this.concern.bind(this, item.user.userId)}>已关注</span> :
                                                    <span className={dongtaiStyle.guanzhu} onClick={this.concern.bind(this, item.user.userId)}>+关注</span>}
                                            </div>
                                            <p className={dongtaiStyle.dongtai_msg} onClick={this.get_detail.bind(this, item.actId, item.info.threadId)}>{JSON.parse(item.json).msg}</p>
                                            <img className={dongtaiStyle.video} src={item.user.backgroundUrl} onClick={this.get_detail.bind(this, item.actId, item.info.threadId)} />
                                        </div>
                                        <div className={dongtaiStyle.operate}>
                                            <span className={dongtaiStyle.part1}><img className={dongtaiStyle.transpond} onClick={this.share.bind(this)} />{item.info.shareCount}</span>
                                            <span className={dongtaiStyle.part2}><img className={dongtaiStyle.comment} onClick={this.get_detail.bind(this, item.actId, item.info.threadId)} />{item.info.commentCount}</span>
                                            {item.info.liked ? <span className={dongtaiStyle.part3} onClick={this.like.bind(this, item.info.threadId)}><img className={dongtaiStyle.support2} />{item.info.likedCount}</span> :
                                                <span className={dongtaiStyle.part3} onClick={this.like.bind(this, item.info.threadId)}><img className={dongtaiStyle.support} />{item.info.likedCount}</span>}
                                        </div>
                                        {/* <p>{item.user.rcmdInfo.reason}</p> */}
                                        {/* <span>{item.user.backgroundUrl}</span> */}
                                        {/* <video src={}/> */}
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                </div>
            </div>

        )
        // } else {
        //     return (
        //         <div>数据加载未完成</div>
        //     )
        // }
    }
}

export default Content
